<!DOCTYPE html>
<html lang="en">
	<head>
		<title>Bootstrap 4 Website Example</title>
		<meta charset="utf-8" />
		<link rel="icon" href="{{ url_for('static', filename='favicon.png') }}" />
		<meta name="viewport" content="width=device-width, initial-scale=1" />

		<!-- 在线加载模式 -->
		<!-- <link rel="stylesheet" href="https://cdn.staticfile.net/twitter-bootstrap/4.3.1/css/bootstrap.min.css" /> 
		<script src="https://cdn.staticfile.net/jquery/3.2.1/jquery.min.js"></script>
		<script src="https://cdn.staticfile.net/popper.js/1.15.0/umd/popper.min.js"></script>
		<script src="https://cdn.staticfile.net/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script> -->

		<!-- 本地加载模式 -->
		<link rel="stylesheet" href="{{ url_for('static', filename='css/bootstrap-4.3.1.min.css') }}" />
		<script src="{{ url_for('static', filename='js/jquery-3.2.1.min.js') }}"></script>
		<script src="{{ url_for('static', filename='js/popper-1.15.0.min.js') }}"></script>
		<script src="{{ url_for('static', filename='js/bootstrap-4.3.1.min.js') }}"></script>

		<style>
			.fakeimg {
				background: #aaa;
			}

			body {
				width: 70%;
				margin: 0 auto;
			}
		</style>
	</head>
	<body>
		<!-- <div class="jumbotron text-center" style="margin-bottom: 0">
			<h2>驿站管理系统</h2>
		</div> -->

        <div>

		<!-- 水平方向 导航栏 -->
		<!-- <div class="container">
			<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
				<a class="navbar-brand" href="#">导航</a>
				<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
					<span class="navbar-toggler-icon"></span>
				</button>
				<div class="collapse navbar-collapse" id="collapsibleNavbar">
					<ul class="navbar-nav">
						<li class="nav-item">
							<a class="nav-link" href="#">我的</a>
						</li>
						<li class="nav-item">
							<a class="nav-link" href="#">关于我</a>
						</li>
						<li class="nav-item">
							<a class="nav-link" href="#">设置</a>
						</li>
					</ul>
				</div>
			</nav>
		</div> -->

		<!-- 垂直方向导航栏 -->
		<div class="container">
			<div class="row">
				<div class="col-2">
					<nav class="navbar navbar-expand-sm navbar-dark bg-dark flex-column">
						<a class="navbar-brand" href="#">品牌</a>>
						<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav">
							<span class="navbar-toggler-icon"></span>
						</button>

						<nav class="nav collapse navbar-collapse flex-column" id="navbarNav">
							<ul class="nav flex-column">
								<li class="nav-item">
									<a class="nav-link active" href="#" onclick="showPage('home')">首页</a>
								</li>
								<li class="nav-item">
									<a class="nav-link" href="#" onclick="showPage('about')">关于</a>
								</li>
								<li class="nav-item">
									<a class="nav-link" href="#" onclick="showPage('settings')">设置</a>
								</li>
							</ul>
						</nav>
					</nav>
				</div>
				<div class="col-9" style="background-color: red">
					<!-- 首页内容 -->
					<div id="home" style="display: block;">
						<h1>首页</h1>
						<p>这是首页内容。</p>
					</div>
					<!-- 关于页面内容 -->
					<div id="about" style="display: none;">
						<h1>关于</h1>
						<p>这是关于页面内容。</p>
					</div>
					<!-- 服务页面内容 -->
					<div id="settings" style="display: none;">
						<h1>服务</h1>
						<p>这是服务页面内容。</p>
					</div>
				</div>
			</div>
		</div>
		<!-- 
		<div class="container" style="margin-top: 30px">
			<div class="row">
				<div class="col-sm-4">
					<h2>关于我</h2>
					<h5>我的照片:</h5>
					<div class="fakeimg">
						<img src="{{ url_for('static', filename='images/avatar.png') }}" class="rounded-circle" alt="my_photo" />
					</div>
					<p>关于我的介绍..</p>
					<h3>一些链接</h3>
					<p>说明文本</p>
					<ul class="nav nav-pills flex-column">
						<li class="nav-item">
							<a class="nav-link active" href="#">激活状态</a>
						</li>
						<li class="nav-item">
							<a class="nav-link" href="#">链接</a>
						</li>
						<li class="nav-item">
							<a class="nav-link" href="#">链接</a>
						</li>
						<li class="nav-item">
							<a class="nav-link disabled" href="#">禁用</a>
						</li>
					</ul>
					<hr class="d-sm-none" />
				</div>
				<div class="col-sm-8">
					<h2>标题</h2>
					<h5>副标题</h5>
					<div class="fakeimg">图像</div>
					<p>一些文本..</p>
					<p>菜鸟教程，学的不仅是技术，更是梦想！！！菜鸟教程，学的不仅是技术，更是梦想！！！菜鸟教程，学的不仅是技术，更是梦想！！！</p>
					<br />
					<h2>标题</h2>
					<h5>副标题</h5>
					<div class="fakeimg">图像</div>
					<p>一些文本..</p>
					<p>菜鸟教程，学的不仅是技术，更是梦想！！！菜鸟教程，学的不仅是技术，更是梦想！！！菜鸟教程，学的不仅是技术，更是梦想！！！</p>
				</div>
			</div>
		</div> -->

		<div class="jumbotron text-center" style="margin-bottom: 0">
			<p>底部内容</p>
		</div>

		
	

    <script>
        function showPage(pageId) {
            // 获取所有的页面元素
            document.getElementById("home").style.display = "none";
            document.getElementById("about").style.display = "none";
            document.getElementById("settings").style.display = "none";

            // 显示指定的页面
            document.getElementById(pageId).style.display = "block";
        }

		</script></body>
</html>
